<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>209会议室申请</title>
    <link rel="shortcut icon" href="./fonts/favicon.png" /> 
    <link rel="stylesheet" href="./css/bootstrap.css">
    <link rel="stylesheet" href="./css/index.css">
	<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
    <script src="./js/bootstrap.js"></script>
</head>
<body>
<div id="app">
    <nav class="navbar navbar-default navbar-static-top">
        <div class="container">
            <div class="navbar-header">

                <!-- Collapsed Hamburger -->
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse">
                    <span class="sr-only">Toggle Navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

                <!-- Branding Image -->
                <a class="navbar-brand" href="{{ url('/') }}">
                    {{ config('app.name', 'Laravel') }}
                </a>
            </div>

            <div class="collapse navbar-collapse" id="app-navbar-collapse">
                <!-- Left Side Of Navbar -->
                <ul class="nav navbar-nav">
                    &nbsp;
                </ul>

                <!-- Right Side Of Navbar -->
                <ul class="nav navbar-nav navbar-right">
                    <!-- Authentication Links -->
                    @if (Auth::guest())
                        <li><a href="{{ route('login') }}">登录</a></li>

                    @else
                        <li><a href="{{ url('teacher/index') }}">最新申请</a></li>
                        <li><a href="{{ url('teacher/history')}}">历史记录</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
                                {{ Auth::user()->name }} <span class="caret"></span>
                            </a>

                            <ul class="dropdown-menu" role="menu">
                                <li>
                                    <a href="{{ route('logout') }}"
                                       onclick="event.preventDefault();
                                                     document.getElementById('logout-form').submit();">
                                        注销
                                    </a>

                                    <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                                        {{ csrf_field() }}
                                    </form>
                                </li>
                            </ul>
                        </li>
                    @endif
                </ul>
            </div>
        </div>
    </nav>
   
     <div class="title">209会议室申请填写</div>    
    <div class="content">
    <div class="tabbable tabs-left" >
            <!--日期-->
            <ul id="myTab" class="nav nav-tabs date">
                @php

                $i=1;
                foreach($dateDict as $k => $v){
                    if($i==1)
                    {
                      echo '<li class="active">
                    <a href="#time'.$i.'" data-toggle="tab">
                        <p>'.$k.'</p>
                        <p>'.$v.'</p>
                    </a>
                         </li>';
                    }
                    else
                    {
                    echo '<li>
                    <a href="#time'.$i.'" data-toggle="tab">
                        <p>'.$k.'</p>
                        <p>'.$v.'</p>
                    </a>
                         </li>';
                     }
                    $i++;
                }

                @endphp
            </ul>
            <!--时间-->
            <div class="time_content">
                <div id="myTabContent" class="tab-content">
                 @php
                  $count=1;

                  foreach ($dateDict as $k => $v ){

                    $m=$moring;
                    $n=$afternoon;
                    $e=$evening;

                    foreach ($applies as $value){


                        if($v == $value['apply_time']){


                            foreach ($value['exact_time'] as $time){

                                   $searchRes=array_search($time,$m);

                                   if($searchRes===0){

                                        $m[$searchRes]="不可用";
                                        if($value['check_status']===-1){
                                        $m[$searchRes]="审核中";
                                   }
                                   }

                                   else if($searchRes){

                                        $m[$searchRes]="不可用";
                                        if($value['check_status']===-1){
                                        $m[$searchRes]="审核中";
                                   }
                                   }



                            }
                             foreach ($value['exact_time'] as $time){

                                   $searchRes=array_search($time,$n);

                                   if($searchRes===0){
                                        $n[$searchRes]="不可用";
                                         if($value['check_status']===-1){
                                         $n[$searchRes]="审核中";
                                   }
                                   }
                                   else if($searchRes){

                                        $n[$searchRes]="不可用";
                                        if($value['check_status']===-1){
                                        $n[$searchRes]="审核中";
                                   }
                                   }



                            }
                             foreach ($value['exact_time'] as $time){
                                    $searchRes=array_search($time,$e);
                                    if($searchRes===0){
                                        $e[$searchRes]="不可用";
                                        if($value['check_status']===-1){
                                        $e[$searchRes]="审核中";
                                   }
                                   }

                                   else if($searchRes){

                                        $e[$searchRes]="不可用";
                                        if($value['check_status']===-1){
                                        $e[$searchRes]="审核中";
                                   }
                                   }

                            }

                        }
                    }

                    if($count==1){
                        echo '<div class="tab-pane fade in active" id="time1">';
                    }

                    else{
                        echo '<div class="tab-pane fade" id="time'.$count.'">';
                    }
                    echo '<p>早上</p>';


                    foreach ($m as $v){
                        echo '<div class="time_item">'.$v.'</div>';
                    }

                    echo '<p>下午</p>';

                    foreach ($n as $v){
                        echo '<div class="time_item">'.$v.'</div>';
                    }

                    echo '<p>晚上</p>';
                    foreach ($e as $v){
                        echo '<div class="time_item">'.$v.'</div>';
                    }

                    echo '</div>';

                    $count++;

                  }
                 @endphp


                    <div class="help">
                        <a href="{{ url('download') }}">下载申请表  <span class="glyphicon glyphicon-download-alt" aria-hidden="true"></span></a>
                        <a href="#" data-toggle="modal" data-target="#tipModal" >申请规则  <span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span></a>
                    </div>   

                </div>
            </div>
        </div>

    </div>


         <button class="btn submit"  id="handle" >确认</button>






    <!-- 提交信息模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        申请表
                    </h4>
                </div>


                <div class="modal-body">
                        <div class="input-group">
                            <span class="input-group-addon" >&nbsp;&nbsp;申请人&nbsp;&nbsp;</span>
                            <input type="text" class="form-control" placeholder="请输入申请人姓名" aria-describedby="sizing-addon2" id="name">
                        </div>
                        <div class="input-group">
                            <span class="input-group-addon" >&nbsp;&nbsp;&nbsp;&nbsp;学号&nbsp;&nbsp;&nbsp;&nbsp;</span>
                            <input type="text" class="form-control" placeholder="请输入申请人学号" aria-describedby="sizing-addon2" id="num">
                        </div>
                        <div class="input-group">
                            <span class="input-group-addon" >电话号码&nbsp;</span>
                            <input type="text" class="form-control" placeholder="请输入申请人电话号码" aria-describedby="sizing-addon2" id="mobile">
                        </div>
                        <div class="input-group">
                            <span class="input-group-addon" >邮箱地址&nbsp;</span>
                            <input type="text" class="form-control" placeholder="请输入申请人邮箱地址" aria-describedby="sizing-addon2" id="email">
                        </div>
                        <div class="input-group">
                            <span class="input-group-addon" >会议主题&nbsp;</span>
                            <input type="text" class="form-control" placeholder="请输入会议主题" aria-describedby="sizing-addon2" id="subject">
                        </div>
 
                        <div class="input-group">
                                <span class="input-group-addon"  >审核部门&nbsp;</span>
                                <div  class="form-control radio-div" >
                                    <label class="radio-inline">
                                        <input type="radio" name="optionsRadiosinline" value="团委" >团委
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" name="optionsRadiosinline" value="学工部">学工部
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" name="optionsRadiosinline" value="其他">其他
                                    </label>
                                </div>
                        </div>

                        <div class="fileupload-box">
                                <p>上传证明:</p>
                                <div class="img-box">
                                        <input type="file"  style="display:none" id="uploadfile" accept="image/*"/>
                                        <img src="./fonts/addpic.png" id="image" >
                                </div>
                               

                        </div>
                                
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                    <button type="button" class="btn btn-primary" id="submit" data-loading-text="提交中，请等待">提交申请</button>
                </div>   
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->





     <!-- 规则模态框（Modal） -->
        <div class="modal fade" id="tipModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                &times;
                            </button>
                            <h4 class="modal-title" >
                                申请规则
                            </h4>
                        </div>
                        <div class="modal-body">
                            <p>1、一次申请只可申请一天内的时间段，不可跨日期申请</p>
                            <p>2、只能申请连续的时间段</p>
                            <p>3、请先下载申请表然后填写申请表审核签名后拍照上传申请证明</p>
                                
                        </div>
        
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭 </button>
                        </div>   
                        </div>
                    </div><!-- /.modal-content -->
                </div><!-- /.modal -->

      
       

   
    
    
</body>
</html>

<script>



    $(function(){

         var timearr=[] //时间段
         var date=''    //日期
         var week=''   //星期

	   
         $("[data-toggle='tooltip']").tooltip()

        // 设置实时变化日期
        for(var i=0;i<7;i++)
        {
            var weekDayObj= $("#myTab").children('li').eq(i).children('a').children('p').eq(0)
            var dateObj= $("#myTab").children('li').eq(i).children('a').children('p').eq(1)
            var weekDayArr=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
            var myDate = new Date();
            var milliseconds=myDate.getTime()+1000*60*60*24*i;
            var newMyDate = new Date(milliseconds);
            var weekDay=newMyDate.getDay(); //获取当前星期X(0-6,0代表星期天)
            var year = newMyDate.getFullYear();//获取当前年
            var month = newMyDate.getMonth()+1;//获取当前月
            var day = newMyDate.getDate();//获取当前日
            weekDayObj.text(weekDayArr[weekDay]);
            dateObj.text(year+'/'+month+'/'+day)
            //初始化日期
            if(i==0){
            
                date=year+'/'+month+'/'+day
                week= weekDayArr[weekDay]
            }
        }

        



        //获取当前点击日期
        $("#myTab").children('li').click(function(){
           week=$(this).children('a').children('p').eq(0).text()
           date=$(this).children('a').children('p').eq(1).text()

           $(".time_item").css("background","#eee")
           timearr=[]

        })

        //选择时间段
        $(".time_item").click(function(){
            var time=$(this).text()
            if(time!="不可用"&&time!="审核中")
            {
                 if(timearr.indexOf(time)!=-1)
                 {
                    var index=timearr.indexOf(time)
                    timearr.splice(index, 1);
                    $(this).css("background","#eee")
                 }
                 else{

                     timearr.push(time)
                     $(this).css("background","skyblue")
                 }
            }
            else       
                return false
        })

      //图片预览
        $("#image").click(function(){
            $("#uploadfile").click();
            })
            $("#uploadfile").change(function(){
                var files=$(this)[0].files[0]
                if(files.size>=1024*1024*3){
                    alert("请上传大小不超过3M的图片！当前图片大小为"+files.size/1024/1024+"M")
                    return
                }
                if(files)
                {

                    var reader=new FileReader();
                    reader.onload=function(evt){
                        $("#image").attr('src',evt.target.result)
                    }
                reader.readAsDataURL(files);
                }
                else{
                    alert("上传失败");
                }
            })
        //点击确认按钮进行时间段判断
        $("#handle").click(function(){
            //console.log(timearr)
            var timecontinue=[];
            for(var j=0;j<timearr.length;j++)
            {
                var num=parseInt(timearr[j].split('-')[0].split(':')[0])
                timecontinue.push(num);
            }
            timecontinue.sort(function (a,b) { return a-b});

                var dif=1
                for(var i=0;i<timecontinue.length-1;i++)
                {
                    dif=timecontinue[i+1]-timecontinue[i];
                    if (dif!=1)
                        break;
                }
                //console.log(timecontinue)
                //console.log(dif)
                if(dif==1){
                    $('#myModal').modal('show')
                }
                else{
                    alert("请选择连续的时间段")
                }
        })
         //提交
         $("#submit").click(function(){


            var emailreg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
            var name =$("#name").val().replace(/\s*/g,"");
            var num=$("#num").val().replace(/\s*/g,"");
            var mobile=$("#mobile").val().replace(/\s*/g,"");
            var email=$("#email").val().replace(/\s*/g,"");
            var department=$("input[type='radio']:checked").val();
            var files=$("#uploadfile")[0].files[0];  //上传图片的信息
            var subject=$("#subject").val()
            var sendData=new FormData()
            sendData.append('applyer_name',name)
            sendData.append('email',email)
            sendData.append('phone',mobile)
            sendData.append('stu_id',num)
            sendData.append('phone',mobile)
            sendData.append('department',department)
            sendData.append('image',files)
            sendData.append('meeting_subject',subject)
            sendData.append('apply_time',date)
            sendData.append('exact_time',timearr)
            sendData.append('day',week)

           // $("#myModal").modal('hide');  //提交后关闭的触发
           if(name==''||num==''||mobile==''||email==''||department=='')
            alert("填写不能为空！")
           else if(num.length!=11)
            alert("学号不符合规范！")
           else if(mobile.length!=11)
            alert("手机号码不符合规范！")
           else if(!emailreg.test(email)) 
            alert("邮箱格式错误！")
           else{
               $(this).button('loading')
               $.ajax({
                   type: "post",
                   url: "{{url('apply')}}",
                   data: sendData,
                   contentType: false,
                   processData: false,
                   success: function (response) {
                      if(response.code==200){
                          alert("申请成功！请等待老师审核")
                          window.location.reload()
                      }
                      else{
                          $("#submit").button('reset')
                          alert("申请失败！"+response.message)

                      }
                   },
               });
           }

        })

         })

       
        

 
</script>